<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>菜鸟教程(runoob.com)</title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-table.min.css" />
		<link rel="stylesheet" type="text/css" href="css/style.min.css" />
	</head>

	<body>

		<div class="container">
			<h2>表格</h2>
			<p> .table 为任意表格添加基本样式 (只有横向分隔线):</p>
			<p> .table-condensed 类让表格更加紧凑，行内边距（padding）被切为两半，以便让表看起来更紧凑</p>
			<p> .table-striped 类在 tbody 内添加斑马线形式的条纹 ( IE8 不支持):</p>
			<p> .table-bordered 类为所有表格的单元格添加边框:</p>
			<p> .table-hover 类启用表格中 tbody 上的行的悬停效果：</p>
			<p> .active 类将悬停的颜色应用在行或者单元格上，当指针悬停在行上时会出现浅灰色背景</p>
			<p> .success 类表示执行成功的操作：</p>
			<p> .info 类表示信息变化的操作:</p>
			<p> .warning 类表示一个警告操作:</p>
			<p> .danger 类表示一个危险的操作:</p>
			<div class="table-responsive">
				<!--通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于 768px） -->
				<div class="row">
					<div class="col-sm-6">
						<!--搜索开始-->
						<div class="row">
							<div class="col-sm-5 m-b-xs">
								<select class="input-sm form-control input-s-sm inline">
									<option value="0">请选择</option>
									<option value="1">选项1</option>
									<option value="2">选项2</option>
									<option value="3">选项3</option>
								</select>
							</div>
							<div class="col-sm-4 m-b-xs">
								<div data-toggle="buttons" class="btn-group">
									<label class="btn btn-sm btn-white">
                                <input type="radio" id="option1" name="options">天</label>
									<label class="btn btn-sm btn-white">
                                <input type="radio" id="option2" name="options">周</label>
									<label class="btn btn-sm btn-white active">
                                <input type="radio" id="option3" name="options">月</label>
								</div>
							</div>
							<div class="col-sm-3">
								<div class="input-group">
									<input type="text" placeholder="请输入关键词" class="input-sm form-control"> <span class="input-group-btn">
                                <button type="button" class="btn btn-sm btn-primary"> 搜索</button> </span>
								</div>
							</div>
						</div>
						<!--搜索结束-->
						<table class="table table-striped table-bordered table-hover">
							<caption>表格布局大全</caption>
							<!--关于表格存储内容的描述或总结。 -->
							<thead>
								<!--表格标题行的容器元素（<tr>） -->
								<tr>
									<th>#</th>
									<!--特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 -->
									<th>Firstname</th>
								</tr>
							</thead>
							<tbody>
								<!--表格主体中的表格行的容器元素（<tr>）。 -->
								<tr>
									<td>1</td>
									<td>Anna</td>
								</tr>
								<tr>
									<td>2</td>
									<td>Debbie</td>
								</tr>
								<tr>
									<td>3</td>
									<td>John</td>
								</tr>
								<tr class="active">
									<td>4</td>
									<td>悬停的颜色</td>
								</tr>
								<tr class="success">
									<td>5</td>
									<td>表示成功的操作</td>
								</tr>
								<tr class="info">
									<td>5</td>
									<td>表示信息变化的操作</td>
								</tr>
								<tr class="warning">
									<td>5</td>
									<td>表示警告的操作</td>
								</tr>
								<tr class="danger">
									<td>5</td>
									<td>表示危险的操作</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="col-sm-6">
						<div class="ibox">
							<div class="ibox-title">
								<ul class="nav navbar-nav navbar-left">
									<li>
										<div class="ibox-tools">基本</div>
									</li>
								</ul>
								<ul class="nav navbar-nav navbar-right">
									<li>
										<div class="ibox-tools">
											<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
												<span class="caret"></span>
											</a>
										</div>
									</li>
									<li>&nbsp;&nbsp;&nbsp;&nbsp;</li>
								</ul>
							</div>
							<div class="ibox-content" style="display: block;" id="collapseOne" class="panel-collapse collapse in">
								<table class="table table-striped table-bordered table-hover">
									<thead>
										<!--表格标题行的容器元素（<tr>） -->
										<tr>
											<th>#</th>
											<!--特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。 -->
											<th>Firstname</th>
										</tr>
									</thead>
									<tbody>
										<!--表格主体中的表格行的容器元素（<tr>）。 -->
										<tr>
											<td>1</td>
											<td>Anna</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Debbie</td>
										</tr>
										<tr>
											<td>3</td>
											<td>John</td>
										</tr>
										<tr class="active">
											<td>4</td>
											<td>悬停的颜色</td>
										</tr>
										<tr class="success">
											<td>5</td>
											<td>表示成功的操作</td>
										</tr>
										<tr class="info">
											<td>5</td>
											<td>表示信息变化的操作</td>
										</tr>
										<tr class="warning">
											<td>5</td>
											<td>表示警告的操作</td>
										</tr>
										<tr class="danger">
											<td>5</td>
											<td>表示危险的操作</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-sm-6">
						<div>
							<div class="bootstrap-table">
								<div class="fixed-table-toolbar"></div>
								<div class="fixed-table-container" style="height: 250px; padding-bottom: 36px;">
									<div class="fixed-table-header" style="margin-right: 0px;">
										<table class="table table-hover" style="width: 603px;">
											<thead>
												<tr>
													<th style="" data-field="Tid" tabindex="0">
														<div class="th-inner ">ID</div>
														<div class="fht-cell" style="width: 87px;"></div>
													</th>
													<th style="" data-field="First" tabindex="0">
														<div class="th-inner ">姓名</div>
														<div class="fht-cell" style="width: 247px;"></div>
													</th>
													<th style="" data-field="sex" tabindex="0">
														<div class="th-inner ">性别</div>
														<div class="fht-cell" style="width: 133px;"></div>
													</th>
													<th style="" data-field="Score" tabindex="0">
														<div class="th-inner ">评分</div>
														<div class="fht-cell" style="width: 133px;"></div>
													</th>
												</tr>
											</thead>
										</table>
									</div>
									<div class="fixed-table-body">
										<div class="fixed-table-loading" style="top: 37px; display: none;">正在努力地加载数据中，请稍候……</div>
										<table data-toggle="table" data-url="js/demo/table_base.json" data-height="250" data-mobile-responsive="true" class="table table-hover" style="margin-top: -36px;">
											<thead>
												<tr>
													<th style="" data-field="Tid" tabindex="0">
														<div class="th-inner ">ID</div>
														<div class="fht-cell" style="width: 87px;"></div>
													</th>
													<th style="" data-field="First" tabindex="0">
														<div class="th-inner ">姓名</div>
														<div class="fht-cell" style="width: 247px;"></div>
													</th>
													<th style="" data-field="sex" tabindex="0">
														<div class="th-inner ">性别</div>
														<div class="fht-cell" style="width: 133px;"></div>
													</th>
													<th style="" data-field="Score" tabindex="0">
														<div class="th-inner ">评分</div>
														<div class="fht-cell" style="width: 133px;"></div>
													</th>
												</tr>
											</thead>
											<tbody>
												<tr data-index="0">
													<td style="">1</td>
													<td style="">奔波儿灞</td>
													<td style="">男</td>
													<td style="">50</td>
												</tr>
												<tr data-index="1">
													<td style="">2</td>
													<td style="">灞波儿奔</td>
													<td style="">男</td>
													<td style="">94</td>
												</tr>
												<tr data-index="2">
													<td style="">3</td>
													<td style="">作家崔成浩</td>
													<td style="">男</td>
													<td style="">80</td>
												</tr>
												<tr data-index="3">
													<td style="">4</td>
													<td style="">韩寒</td>
													<td style="">男</td>
													<td style="">67</td>
												</tr>
												<tr data-index="4">
													<td style="">5</td>
													<td style="">郭敬明</td>
													<td style="">男</td>
													<td style="">100</td>
												</tr>
												<tr data-index="5">
													<td style="">6</td>
													<td style="">马云</td>
													<td style="">男</td>
													<td style="">77</td>
												</tr>
												<tr data-index="6">
													<td style="">7</td>
													<td style="">范爷</td>
													<td style="">女</td>
													<td style="">87</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="fixed-table-footer" style="display: none;">
										<table>
											<tbody>
												<tr></tr>
											</tbody>
										</table>
									</div>
									<div class="fixed-table-pagination" style="display: none;"></div>
								</div>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>